<template>
	<div class="video-wrapper">
		<div class="video-player">
			<img src="./img/live_banner.jpg" alt="#" />
		</div>
		<div class="video-masker"></div>
		<div class="video-ctrl"></div>
	</div>
</template>

<script>
export default {
	name: 'video-player',
	data(){
		return {

		}
	}
};	
</script>

<style lang="scss" scoped>
.video-wrapper {
	width: 100%;
	height: 350px;
	position: relative;
	overflow: hidden;

	.video-masker {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.6);
	}
	.video-ctrl {
		position: absolute;
		width: 140px;
		height: 140px;
		border: 4px solid #fff;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 100%;
		background-color: rgba(0,0,0,.4);
		&:after {
			content: '';
			border-style: solid;
			border-color: transparent transparent transparent #fff;
			border-width: 40px 0 40px 60px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-30%, -50%, 0);
			border-radius: 6px;
		}
	}
}
</style>

